<div class="box">
    <div class="heading">
        <h1><img alt="" src="<?php echo base_url('assets/admin/images/category.png'); ?>">Add City</h1>

        <div class="buttons">
            <a class="button" href="#" onClick="$('#form').submit();"><span>Save</span></a>
            <a class="button" href="<?php echo base_url(ADMIN_PATH . '/setting/cities'); ?>"><span>Cancel</span></a>
        </div>
    </div>
    <div class="content">

        <?php echo form_open(null, 'id="form"')?>

        <div class="form">
            
			<div>
                <?php echo form_label('Country:', 'country_id')?>
                <select name="country_id" id="country_id">
					<?php foreach ($countries as $country) { ?>
					
					<option value="<?php echo $country['country_id']; ?>"><?php echo $country['name']; ?></option>
					
					<?php } ?>
				</select>
            </div>
			<div>
                <?php echo form_label('State:', 'state_id')?>
                <select name="state_id" id="state_id">
					<option value="0">Select state</option>
				</select>
            </div>
			<div>
                <?php echo form_label('City Name:', 'name')?>
                <?php echo form_input(array('name' => 'name', 'value' => set_value('name', '')))?>
            </div>
			<div>
				<?php echo form_label('<span class="required">*</span> Status:', 'status'); ?>
				<?php echo form_dropdown('status', array('1'=>'Enable', '0' => 'Disable'), set_value('status',''), 'id=\'status\'')?>
			</div>
			
        </div>

        <div class="clear"></div>

        <?php echo form_close(); ?>
    </div>
</div>
<script type="text/javascript">
$('select[name=\'country_id\']').bind('change', function() {
	$.ajax({
		url: '<?php echo base_url();?>ajax/state/' + $("#country_id").val(),
		dataType: 'json',
		beforeSend: function() {
			$('select[name=\'country_id\']').after('<span class="wait">&nbsp;<img src="catalog/view/theme/default/image/loading.gif" alt="" /></span>');
		},
		complete: function() {
			$('.wait').remove();
		},			
		success: function(json) {
			//alert(json);
			
			html = "<option value=''>Select State</option>";
			if (json['zone'] != '') {
				for (i = 0; i < json['zone'].length; i++) {
        			html += "<option value='" + json['zone'][i]['zone_id'] + "'";
	
	    			html += '>' + json['zone'][i]['name'] + '</option>';
				}
			} else {
				html += '<option value="0" selected="selected">Select state</option>';
			}
			
			$('select[name=\'state_id\']').html(html);
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

$('select[name=\'country_id\']').trigger('change');


//-->
</script>